<script setup lang="ts">

</script>

<template>
  <v-app>
    <v-sheet color="#F5F4F2">
      <v-sheet color="transparent" class="pt-[72px]">
        <banner-image
            HeadImage="https://oss-cdn.tearful.cn/shop/contact-us/Contact-DT-Lido_03_Ivory_Boucle_0971-2500x890.webp"/>
      </v-sheet>
      <div class="d-flex justify-center py-16">
        <v-sheet color="transparent" class=" w-[90%]">
          <v-row>
            <!--     左边内容-->
            <v-col md="6" cols="12" class="">
              <v-sheet color="transparent" class="d-flex flex-column text-center">
                <h1 class="py-4 text-[20px] text-[#413E3A] font-weight-black 2xl:text-[30px]">Email:</h1>
                <p class="py-4 text-[#786554] text-xs font-weight-medium tracking-wide leading-6 2xl:text-[20px]">
                  hello@albanypark.com</p>
              </v-sheet>

               <v-sheet color="transparent" class="d-flex flex-column text-center py-8">
                <h1 class="py-4 text-[20px] text-[#413E3A] font-weight-black 2xl:text-[30px]">Phone:</h1>
                <p class="py-4 text-[#786554] text-xs font-weight-medium tracking-wide leading-6 2xl:text-[20px]">1.800.681.5831</p>
              </v-sheet>

              <v-sheet color="transparent" class="d-flex flex-column text-center">
                <h1 class="py-4 text-[20px] text-[#413E3A] font-weight-black 2xl:text-[30px]">Customer Support Hours:</h1>
                <p class="text-[#786554] text-xs font-weight-medium tracking-wide leading-6 2xl:text-[20px]">Mon-Fri: 8am-6pm CST</p>
                <p class="text-[#786554] text-xs font-weight-medium tracking-wide leading-6 2xl:text-[20px]">Sat-Sun: 8am-5pm CST</p>
              </v-sheet>

            </v-col>

            <!--     右边内容-->
            <v-col md="6" cols="12" class="">
              <v-sheet color="transparent">
                <div class="text-[#ff0000] font-weight-thin text-xs  2xl:text-xl">
                  Oops, looks like something something went wrong. Please correct the highlighted field(s) below:
                </div>
              </v-sheet>
              <v-sheet color="transparent" class="py-5">
                <h1 class="font-weight-thin text-[#413e3]">Name</h1>
                <v-sheet color="transparent" class="py-4">
                  <v-card
                      class=""
                      color="transparent"
                      elevation="0"
                      max-width="640"
                      flat
                  >
                    <v-card-text class="pa-0">
                      <v-text-field
                          density="compact"
                          label="Your name"
                          variant="solo"
                          hide-details
                          single-line
                      ></v-text-field>
                    </v-card-text>
                  </v-card>
                </v-sheet>
              </v-sheet>

              <v-sheet color="transparent" class="py-5">
                <h1 class="font-weight-thin text-[#413e3]">Email</h1>
                <v-sheet color="transparent" class="py-4">
                  <v-card
                      class=""
                      color="transparent"
                      elevation="0"
                      max-width="640"
                      flat
                  >
                    <v-card-text class="pa-0">
                      <v-text-field
                          density="compact"
                          label="your@email.com"
                          variant="solo"
                          hide-details
                          single-line
                      ></v-text-field>
                    </v-card-text>
                  </v-card>
                </v-sheet>
              </v-sheet>

              <v-sheet color="transparent" class="py-5">
                <h1 class="font-weight-thin text-[#413e3]">Message</h1>
                <v-sheet color="transparent" class="pt-4">
                  <v-card
                      class="pa-0"
                      color="transparent"
                      elevation="0"
                      max-width="640"
                      flat
                  >
                    <v-textarea label="" variant="solo"></v-textarea>
                  </v-card>
                </v-sheet>
              </v-sheet>
              <!--   按钮-->
              <v-sheet color="transparent" class="py-4">
                <v-btn height="50" variant="flat" rounded="0" color="#786554" class="text-none font-weight-bold">
                  Submit
                </v-btn>
              </v-sheet>
            </v-col>
          </v-row>

        </v-sheet>
      </div>
    </v-sheet>

  </v-app>
</template>

<style scoped>

</style>